<template>
  <view class="room">
    <view v-if="info && !showEmpty" class="chart">
      <text>房间数（间）</text>
      <qiun-data-charts :opts="config" type="column" :chartData="chartData" :errorShow="false" :canvas2d="true" background="none" :tooltipShow="false" :tapLegend="false" />
    </view>
    <view v-if="info && !showEmpty" class="card collect">
      <view class="hd">
        <text class="grey block">总空闲房间</text>
        <text>{{ info.totalEmpty }}</text>
      </view>
      <view class="hd">
        <text class="grey block">总消毒房间</text>
        <text>{{ info.totalSterilize }}</text>
      </view>
      <view class="hd">
        <text class="grey block">阳性房间</text>
        <text>{{ info.totalPositive }}</text>
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import Config from '@/components/v-chart/column';
  import VEmpty from '@/components/v-empty/index.vue';
  import Api from '@/api/main';
  export default {
    components: {
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        config: Config,
        info: {
          // // 总空闲房间
          // totalEmpty: 100,
          // // 总消毒房间
          // totalSterilize: 20,
          // // 阳性房间
          // totalPositive: 30,
          // // 各隔离点房间详情
          // roomDetails: [
          // {
          //   address: '地点1',
          //   // 空闲中数量
          //   empty: 100,
          //   // 消毒中
          //   sterilize: 20,
          //   // 使用中
          //   used: 30
          // },
          // {
          //   address: '地点1',
          //   // 空闲中数量
          //   empty: 100,
          //   // 消毒中
          //   sterilize: 20,
          //   // 使用中
          //   used: 30
          // }]
        }
      };
    },
    computed: {
      chartData() {
        return {
          categories: this.info.roomDetails.map(a => a.address),
          series: [
          {
            name: '空闲中',
            data: this.info.roomDetails.map(a => a.empty)
          },
          {
            name: '消毒中',
            data: this.info.roomDetails.map(a => a.sterilize)
          },
          {
            name: '占用中',
            data: this.info.roomDetails.map(a => a.used)
          }]
        };
      }
    },
    methods: {
      async getData() {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getRoomsStatistics);
        this.info = res;
        this.showEmpty = !res;
        uni.hideLoading();
      }
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss">
  .room {
    width: 100%;
    padding: 20rpx 40rpx;

    .chart {
      width: calc(100% - 100rpx);
      margin: 0 auto;
    }

    .collect {
      margin-top: 40rpx;
      padding: 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2;

      .hd {
        text-align: center;
      }

      .grey {
        color: $uni-sub-text-color;
      }
    }
  }
</style>